<template>
    <div>
        <el-header class="header">
            <span>错误</span>
        </el-header>
        <el-table stripe border :data="dataList" style="width: 100%">
            <el-table-column prop="url" label="URL"></el-table-column>
            <el-table-column prop="time" label="上报时间"></el-table-column>
            <el-table-column prop="sub_type" label="错误类型"></el-table-column>
            <el-table-column prop="message" label="错误信息">
                <template slot-scope="scope">
                    <el-tooltip
                        effect="dark"
                        :content="scope.row.message"
                        placement="top"
                    >
                        <span class="oneline">{{ scope.row.message }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="stack" label="错误堆栈">
                <template slot-scope="scope">
                    <el-tooltip
                        effect="dark"
                        :content="scope.row.stack"
                        placement="top"
                    >
                        <span class="oneline">{{ scope.row.stack }}</span>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="bottom-page mg-top-10">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="page.total"
                :current-page.sync="page.index"
                @current-change="getList"
            >
            </el-pagination>
            <div class="mg-left-10">共计：{{page.total}}</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            page: {
                index: 1,
                size: 10,
                total: 0
            },
            dataList: [],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.axios
                .get("/stat/getErrorList", {
                    params: { pageIndex: this.page.index, pageSize: this.page.size },
                })
                .then((res) => {
                    this.dataList = res.data.rows
                    this.page.total = res.data.count
                });
        },
    },
};
</script>

<style scoped>
.oneline {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bottom-page {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>